<template>
  <div style="background-color: white">
    <van-nav-bar
      title="地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-address-list
      v-model="address"
      :list="user_address"
      default-tag-text="默认"
      @add="address_show = true"
      @edit="up_show"
      :switchable="false"
    />
  </div>

  <!-- 地区 -->
  <van-popup
    v-model:show="show_region"
    round
    position="bottom"
    style="height: auth"
  >
    <van-cascader
      v-model="cascaderValue"
      title="请选择所在地区"
      :field-names="fieldNames"
      :options="CascaderList"
      @close="show_region = false"
      @finish="get_region"
    />
  </van-popup>

  <!-- 地址 -->
  <van-popup
    v-model:show="address_show"
    round
    position="bottom"
    class="add_address"
  >
    <van-form @submit="onSubmit">
      <van-field
        v-model="address_dict.nickname"
        name="收件人"
        label="收件人"
        placeholder="收件人"
      />
      <van-field
        v-model="address_dict.mobile"
        name="手机号"
        label="手机号"
        placeholder="手机号"
      />
      <van-field
        v-model="region"
        is-link
        readonly
        label="地区"
        placeholder="请选择所在地区"
        @click="show_region = true"
      />
      <van-field
        v-model="address"
        name="详细地址"
        label="详细地址"
        placeholder="详细地址"
        rows="2"
        autosize
        type="textarea"
        maxlength="128"
        show-word-limit
      />
      <van-cell center title="是否默认">
        <template #right-icon>
          <van-switch v-model="address_dict.is_default" size="24" />
        </template>
      </van-cell>
      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="address_button"
      >
        保存
      </van-button>
      <!-- <van-button
        v-if="address_dict.id"
        round
        block
        class="address_del_button"
        @click="del_address(address_dict.id)"
      >
        删除
      </van-button> -->
    </van-form>
  </van-popup>
</template>

<script>
import { onClickLeft } from "../../utlis/utils";
import { fieldNames, CascaderList } from "../../utlis/region";
export default {
  data() {
    return {
      onClickLeft,
      // rules,
      fieldNames,
      CascaderList,
      user_address: [],

      // 添加或修改
      address_dict: {
        nickname: null,
        mobile: null,
        address: null, // 详细地址
        is_default: false,
      },

      region: null,
      address: null, // 详细地址
      show_region: false,

      address_show: false,

      user_id: localStorage.getItem("id"),
    };
  },
  created() {
    this.submit();
  },
  methods: {
    submit: function () {
      this.myaxios(this.host + "users/address/", "get", {
        id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          let address_list = data.data;
          for (let i in address_list) {
            let address = {
              id: address_list[i].id,
              name: address_list[i].nickname,
              tel: address_list[i].mobile,
              address: address_list[i].address,
              isDefault: address_list[i].is_default,
            };
            this.user_address.push(address);
          }
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    // 获取地址
    get_region({ selectedOptions }) {
      // console.log("地区",selectedOptions)
      this.region =
        selectedOptions[0].label +
        "/" +
        selectedOptions[1].label +
        "/" +
        selectedOptions[2].label;
      this.show_region = false;
    },
    up_show(val) {
      // 转回数据
      this.address_dict = {
        id: val.id,
        nickname: val.name,
        mobile: val.tel,
        is_default: val.isDefault,
      };
      this.region =
        val.address.split("/")[0] +
        "/" +
        val.address.split("/")[1] +
        "/" +
        val.address.split("/")[2];
      this.address = val.address.split("/")[3];
      this.address_show = true;
    },
    // 拼接地址
    onSubmit() {
      this.address_dict.address = this.region + "/" + this.address;
      if (this.address_dict.id) {
        // 有则修改 无则增加
        this.up_address();
      } else {
        this.add_address();
      }
    },
    // 添加地址
    add_address() {
      this.myaxios(this.host + "users/address/", "post", {
        user_id: localStorage.getItem("id"),
        nickname: this.address_dict.nickname,
        mobile: this.address_dict.mobile,
        address: this.address_dict.address,
        is_default: this.address_dict.is_default,
      }).then((data) => {
        console.log("添加地址信息", data);
        if (data.errcode == 0) {
          this.address_show = false;
          this.address_dict = {};
          this.$toast.success(data.msg);
          this.get_user_address();
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    // 修改
    up_address: function () {
      this.myaxios(this.host + "users/address/", "put", {
        add_id: this.address_dict.id,
        user_id: localStorage.getItem("id"),
        nickname: this.address_dict.nickname,
        mobile: this.address_dict.mobile,
        address: this.address,
        is_default: this.address_dict.is_default,
      }).then((data) => {
        console.log("修改地址信息", data);
        if (data.errcode == 0) {
          this.address_show = false;
          this.address_dict = {};
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    del_address: function(id){
      this.myaxios(this.host + "users/address/" + id +'/', "delete", {
        user_id: localStorage.getItem("id"),
      }).then((data) => {
        console.log("修改地址信息", data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>
</style>